<template>

  <!-- 顶部导航栏 - 登录和注册页面不显示 -->
  <van-nav-bar
      v-if="path != '/login' && path != '/register'"
      :title="title" left-text="返回" left-arrow
      :placeholder="true"
               @click-left="onClickLeft"
               @click-right="onClickRight">
    <template #right>
      <!-- 区分path的路径 -->
      <van-icon v-if="path != '/chat' && path != '/chat/info' && path != '/tagsSelect' && path !='/genderSelect' && path !='/' " name="search" size="18" />
      <van-icon v-if="path == '/chat'" name="weapp-nav" size="18" ></van-icon>
      <van-icon v-if="path == '/applyCenter'" name="">添加朋友</van-icon>
    </template>
  </van-nav-bar>

  <!-- 中间内容 -->
  <div class="content" :class="{ 'no-nav-content': path == '/login' || path == '/register' }">
    <router-view></router-view>
  </div>

  <!-- 底部tab栏 - 只在特定页面显示 -->
    <van-tabbar route class="custom-floating-tabbar" v-if="showTabbar">
      <van-tabbar-item icon="home-o" to="/index" name="index">主页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" :dot="isHavaChat" to="/chatCenter" name="chat" @click="isHavaChat=false">消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/team" name="team">队伍</van-tabbar-item>
      <van-tabbar-item icon="bullhorn-o" :dot="isHavaApply" to="/applyCenter" name="chat" @click="isHavaApply=false">通知</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user" name="user">我的</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/more" name="more">更多</van-tabbar-item>
    </van-tabbar>

</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import { ref} from "vue";
import {userStore} from "../stores/user/user";

  const router = useRouter();
  const route = useRoute();
  const userStoreAPI = userStore();
  const isHavaApply = ref(false);//是否有通知(添加好友申请)
  const isHavaChat = ref(false);//是否有人发消息

  console.log("当前地址",route.path);
  const path = ref(route?.path);

  // 需要显示底部栏的页面路径
  const tabbarPaths = ['/index', '/chatCenter', '/team', '/applyCenter', '/user', '/more'];
  
  // 计算是否显示底部栏
  const showTabbar = ref(false);

  const title = ref('交友协作平台');

  const onClickLeft = () => {
    router.back();//回退上一页
  };

  const onClickRight = () => {
    if(path.value == '/chat') {
      //执行显示聊天室的具体信息
      router.push("/chat/info");//从pina拿数据
    }else if (path.value == '/chat/info'){
      //不执行操作！
    }else if (path.value == '/tagsSelect'){
      //不执行操作
    }else if(path.value == '/genderSelect'){
      //不执行任何操作
    }else if(path.value == '/applyCenter'){
      //添加朋友=>跳转到搜索用户界面
      //跳转到用户搜索页面
      router.push('/selectUserCenter');
    }else if (path.value == '/') {
      //主页不执行任何操作
    }else{
      router.push("/search");//跳转到搜索标签页面
    }

  };




  // 调用路由全局钩子(更新标题)
  router.beforeEach((to, from) => {
    if (typeof to.name === "string") {
      console.log('to',to);
      path.value = to.path;
      
      // 判断是否显示底部栏（只在特定页面显示）
      showTabbar.value = tabbarPaths.includes(to.path);
      
      if (path.value == '/chat'){
        title.value = (typeof to.query.name === 'string' ? to.query.name : '') || '聊天室';//或者直接从pina拿即可

      }else {
        title.value = to.name as string || '交友协作平台';
      }
    }
  });
  
  // 初始化时也要判断
  showTabbar.value = tabbarPaths.includes(path.value);

  // //监听连接成功事件（自定义） =》 先监听后触发事件(连接成功触发)
  // window.addEventListener('openConnect',async function(event) {
  //   // 检查源是否可信
  //   // if (event.origin !== 'http://localhost:5173') {
  //   //   return; // 阻止非信任源的消息
  //   // }
  //   console.log('openConnect');
  //   const user = await userStoreAPI.getCurrentUser();
  //   connectionSendBind(user.id);//绑定连接
  // });

  //监听是否有人发消息了
  window.addEventListener('chat', function(event) {
    console.log('chat',event);
    if (!isHavaChat.value){
      isHavaChat.value = true;
    }
  });


  // 监听连接成功事件（自定义） =》 先监听后触发事件(连接成功触发)
  window.addEventListener('haveApply', function(event) {
    console.log('haveApply',event);
    if (!isHavaApply.value){
      isHavaApply.value = true;
    }
  });

  // 监听连接成功事件（自定义） =》 先监听后触发事件(连接成功触发)
  window.addEventListener('haveApplyRes', function(event) {
  console.log('haveApplyResBasicLayout',event);
  if (!isHavaApply.value){
    isHavaApply.value = true;
  }
  });

</script>


<style scoped>
/* 底部内容区域 */
.content {
  padding-bottom: 65px; /* 为悬浮底部栏留出空间 */
}

.no-nav-content {
  padding: 0 !important;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

/* 自定义悬浮底部栏样式 */
.custom-floating-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05);
  border-radius: 15px 15px 0 0;
  z-index: 1000;
  padding: 5px 0;
}

/* 调整AI图标样式 */
.special-icon {
  color: #603EFAFF; /* 为AI图标设置特殊颜色 */
  font-size: 20px;
}

/* 调整图标大小 */
.van-tabbar-item__icon {
  font-size: 22px;
}

/* 调整文字大小 */
.van-tabbar-item__text {
  font-size: 12px;
}

/* 消息红点样式优化 */
.van-tabbar-item__icon .van-badge__dot {
  top: -5px;
  right: -5px;
}

</style>